<template>
  <el-container>
    <el-header>
      <el-row v-model="user">
        <!--        下面的位置放avatar-->
        <el-col :span="2">
          <el-image :src="require('@/assets/icons/avator.png')" class="avator" v-show="user.name"></el-image>
        </el-col>

        <!--        下面的位置放用户信息-->
        <el-col
            :span="6"
        >
          <h2 v-show="user.name">{{ user.name }}&nbsp;{{ user.class }}</h2>
        </el-col>

        <el-col :span="2"></el-col>

        <!--        下面放LOGO-->
        <el-col
            :span="4"
        >
          <el-image
              :src="logo_path"
              style="height: 80px"
          ></el-image>
        </el-col>

        <!--        占位符-->
        <el-col :span="6"></el-col>

        <!--        下面放登录按钮-->
        <el-col :span="4">
          <el-button type="success" color="#3bcdaf" class="logout" @click="logout()" v-show="user.name">退出登录</el-button>
        </el-col>

      </el-row>
    </el-header>

    <router-view/>

  </el-container>

</template>

<style>

.el-container {
  width: 1024px;
  height: 600px;
  background: #3bcdaf;
  border-top: 1px solid var(--el-border-color-base);
  border-bottom: 1px solid var(--el-border-color-base);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.el-header {
  width: 1024px;
  height: 80px !important;
  background: #FFF;
}

.avator {
  height: 80px !important;
  margin-left: 1px;
}

.logout {
  text-align: right !important;
  width: 100px !important;
  height: 50px !important;
  margin-top: 16px !important;
  margin-right: 0px !important;
}

h2 {
  margin-top: 25px !important;
}


</style>

<script lang="ts">

import {onMounted, ref,computed} from "vue";
import axios from "axios";
import store from "@/store";
import {useRouter} from "vue-router";

export default {
  setup() {
    const router = useRouter();
    // store.commit("setUser",{name:"张三",class:"高三（一）班"}); //测试用的初始化添加对象用的
    const user = computed(() => store.state.user);

    const logo_path = ref();
    /**
     * login 接口，判断用户是否登录 TODO: 这里是开发版本下需要修改的地方
     */
    /*const login = () => {
      axios.post("/login").then((response)=>{
        const data = response;
        if(data.success){
          store.commit("setUser",data.content);
        }
      })
    }*/

    /**
     * logout 接口，用户进行登出操作,通过token来进行的
     */
    const logout = () =>{
      window.sessionStorage.removeItem("USER");
      router.push("/");
      router.go(0);
    }

    onMounted(() => {
      logo_path.value = require('@/assets/img/fape-logo.jpg');
    });


    return {
      logo_path,
      user,
      logout,
    }
  }
}
</script>